<template>
  <MainSlot v-loading="loading">
    <template v-slot:btn>
      <BtnSlot :btnList="btnList" @handleEvent="getBtnEvent"></BtnSlot>
    </template>
    <template v-slot:table>
      <div class="tableList">
        <div class="tableModle">
          <div class="tableTilte">已选物料类型</div>
          <el-tree ref="tree_left" show-checkbox :data="treeData" node-key="materialTypeNo"
            :props="{ children: 'child' }">
            <span class="custom-tree-node " slot-scope="{ node, data }">
              <span>
                <i
                  :class="node.level == 1 || (data.child ? data.child.length : 0) ? 'el-icon-folder-opened' : 'el-icon-document'"></i>
                <span class="label">{{ data.materialTypeName }}</span>
              </span>
              <!-- <span> <span class="titleTypeName">关联类型：</span> {{ getBreedTypeName(data.breedType).join('；') }}</span> -->
            </span>
          </el-tree>
        </div>
        <div class="line"></div>
        <div class="tableModle">
          <div class="tableTilte">所有物料类型</div>
          <el-tree id="tableThead_2" ref="tree_right" show-checkbox :data="typeList" node-key="materialTypeNo"
            :props="{ children: 'child' }">
            <span class="custom-tree-node " slot-scope="{ node, data }">
              <span>
                <i :class="(data.child ? data.child.length : 0) ? 'el-icon-folder-opened' : 'el-icon-document'"></i>
                <span class="label">{{ data.materialTypeName }}</span>
              </span>
            </span>
          </el-tree>
        </div>
      </div>
    </template>
    <template v-slot:dialogModule>
      <div class="guideBox" v-if="isGuide">
        <div class="routerInfo" :style="guideStyle" v-if="isGuide && guideInfo.index > 0 && guideInfo.procedure.length">
          <div class="guideText">{{ guideIndex + 1 }}. {{ guideInfo.procedure && guideInfo.procedure.length >
            0 ?
            guideInfo.procedure[guideIndex]
            : '' }}</div>
          <div class="guideNext" @click="guideNext" v-if="guideInfo.procedure.length > (guideIndex + 1)">下一步
          </div>
        </div>
      </div>
      <AddType :title="'物料类型'" @closeDialog="closeDialog" :dialogVisible="dialogVisible_type" :list="addSelectionList">
      </AddType>
      <AddEdit :title="'提交养殖类别'" @closeDialog="closeDialog" :dialogVisible="dialogVisible" :typeList="allTypeList"
        :data="formData">
      </AddEdit>
    </template>
  </MainSlot>
</template>
<script>
import MainSlot from "@/components/MainSlot";
import Pagination from '@/components/Pagination';
import SearchForm from '@/components/SearchForm';
import TableData from '@/components/TableData';
import BtnSlot from '@/components/BtnSlot';
import EnumSlot from '@/components/EnumSlot';
import AddEdit from './components/addEdit.vue';
import AddType from './components/addType.vue';
import publicLnterface from '@/api/publicLnterface';
import materialTypeManagement from '@/api/basicInformation/materialTypeManagement';


export default {
  components: { MainSlot, Pagination, SearchForm, TableData, BtnSlot, EnumSlot, AddEdit, AddType },
  computed: {
    guideInfo() {
      return this.$store.state.user.guideInfo;
    },
    isGuide() {
      return this.$store.state.user.isGuide || ''
    },
  },
  data() {
    return {
      guideIndex: 0,
      guideStyle: {},
      loading: false,
      dialogVisible: false,
      dialogVisible_type: false,
      addSelectionList: [],
      formData: {},
      page: 1,
      selectIndex: 0,
      btnList: ['submitData', 'add', 'delete'],
      treeData: [],
      dataList: [
        {
          item1: '虾类',
          item2: '黑虎虾',
          item3: '1月-10月',
          item4: ''
        }, {
          item1: '虾类',
          item2: '皮皮虾',
          item3: '6月-9月',
          item4: ''
        }
      ],
      tableThead: [
        { isShow: true, label: '物料类型', prop: 'item1' },
        { isShow: true, label: '物料名称', prop: 'item2' },
        { isShow: true, label: '最佳养殖时间', prop: 'item3' },
        { isShow: true, label: '物料图片', slotName: 'item4' }
      ],
      tableThead_2: [
        { isShow: true, label: '物料类型', prop: 'item1' },
        { isShow: true, label: '物料名称', prop: 'item2' },
        { isShow: true, label: '最佳养殖时间', prop: 'item3' }
      ],
      allTypeList: [],
      typeList: [],
      formItemList: [
        {
          label: '物料名称',
          type: 'select',
          selectOptions: [{ text: 111, value: 111 }],
          param: 'item1',
          defaultSelect: '', // 下拉框默认选中项
          multiple: false,
          isShow: true
        }
      ],
      breedTypeObj: {
        "HANGING_WATER_BREED": '吊水养殖',
        "TRADITION_BREED": '传统养殖',
        "CIRCULATE_BREED": '循环水养殖',
        "RUNWAY_BREED": '跑道养殖'
      }
    }
  },

  watch: {
    guideInfo: {
      handler(v) {
        this.setGuide(v)
        console.log(v)
      },
      deep: true
    }
  },
  mounted() {
    this.queryType();
    this.queryPageByCondition();
    setTimeout(() => {
      this.setGuide(this.guideInfo || {})
    }, 1000);
  },
  methods: {

    guideNext() {
      let { index, procedure } = this.guideInfo
      this.$store.dispatch("user/getGuideInfo", {
        procedure: procedure,
        index: index + 1
      });
    },
    setGuide(v) {
      let { index } = v;
      this.guideIndex = index;
      let tree = document.getElementById('tableThead_2');
      let btn = document.getElementById('guide_add');
      this.resetGuide(tree);
      this.resetGuide(btn);
      if (index == 1) {
        tree.className += " guide-name";
        this.guideStyle = {
          top: '30%',
          right: '54%',
          wayFlag: 'right'
        }
      } else if (index == 2) {
        btn.className += " guide-name";
        this.guideStyle = {
          top: '12%',
          right: '36%',
          wayFlag: 'right'
        }
      }
    },
    resetGuide(node) {
      node && (node.className = node.className.replace("guide-name", ""))
    },
    getBreedTypeName(type) {
      let list = type.split(',')
      let typeName = []
      list.forEach(type => {
        typeName.push(this.breedTypeObj[type])
      })
      console.log(typeName, list)
      return typeName
    },
    async queryType() {
      let { data } = await publicLnterface.materialType();
      this.typeList = data || [];
      this.typeList.forEach(item => {
        if (item.child && item.child.length > 0) {
          this.allTypeList = this.typeList.concat(item.child);
        }
      });
    },
    //获取本地库
    queryPageByCondition() {
      materialTypeManagement.queryPageByCondition().then(res => {
        this.treeData = res.data
      }).catch(err => {
        console.log(err)
      })
    },
    //删除本地数据
    delList(deleteList) {
      let list = deleteList || this.$refs.tree_left.getCheckedKeys();
      if (list.length == 0) return
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        let res = await materialTypeManagement.delList(list);
        if (res.code == 1) {
          this.$message.success(res.msg || '删除成功');
          this.queryPageByCondition();
        } else {
          this.$message.warning(res.msg || '删除失败');
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //获取选中Btn
    getBtnEvent(flag) {
      if (flag == 'add') {
        this.addSelectionList = this.$refs.tree_right.getCheckedKeys();
        if (this.addSelectionList.length == 0) {
          this.$message.warning('请先选择添加项目')
          return
        }
        // this.dialogVisible_type = true;
        materialTypeManagement.importPublicList('', this.addSelectionList).then(res => {
          this.$message[res.code == 1 ? 'success' : 'warning'](res.code == 1 ? '操作成功' : res.msg || '操作失败');
          this.addSelectionList = [];
          this.queryPageByCondition();
        }).catch(err => {
          this.$message.error(err);
        })
      } else if (flag == "submitData") {
        this.dialogVisible = true
      } else if (flag == 'delete') {
        this.delSelectionList = this.$refs.tree_left.getCheckedKeys();
        if (this.delSelectionList.length > 0) {
          this.delList(this.delSelectionList)
        } else {
          this.$message.warning('请先选择表单数据项后再删除！')
        }
      }
    },
    //关闭弹窗
    closeDialog() {
      this.dialogVisible = false;
      this.dialogVisible_type = false;
      this.addSelectionList = [];
      this.delSelectionList = [];
      this.queryPageByCondition();
    },
  }
};
</script>
<style lang="scss" scoped>
::v-deep .module {
  height: calc(100% - 10px) !important;
}

::v-deep .el-tree-node__content {
  height: 50px;
  border-bottom: 1px solid #f0f0f0;
}

.custom-tree-container {
  width: 100%;

  .icon {
    font-size: 14px;
  }
}

::v-deep .custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
  font-size: 14px;
}

.label {
  padding-left: 10px;
}


.itemData {
  font-size: 14px;
  padding-left: 50px;
  color: #999999;
}

.tableList {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .line {
    width: 0;
    height: 100%;
    border-left: 1px solid #e9e9e9;
  }

  .tableModle {
    width: calc(50% - 10px);

    .tableTilte {
      font-size: 14px;
      padding: 10px 0;
      color: #4381b5;
    }
  }
}

::v-deep .el-tree {
  height: calc(100% - 50px);
  overflow: auto;
}

.titleTypeName {
  color: #999999
}


.guideBox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #00000030;
  z-index: 10;
}


.routerInfo {
  max-width: 400px;
  min-width: 300px;
  padding: 10px;
  background-color: #FF9243;
  color: #ffffff;
  position: fixed;
  z-index: 9999;

  .guideText {
    width: 100%;
    text-align: left;
    line-height: 26px;
  }

  .guideNext {
    width: 100px;
    margin-top: 15px;
    background-color: #e4a579;
    border: 1px solid #c65504;
    border-radius: 4px;
    text-align: center;
    line-height: 28px;
    cursor: pointer;

    &:hover {
      background-color: #d88244;
    }
  }
}

::v-deep {

  .el-table--border::after,
  .el-table--group::after,
  .el-table::before {
    z-index: 0;
  }

  .el-checkbox__inner {
    z-index: 0;
  }
}
</style>